<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>13 vue动态组件</title>
    </head>
    <body>
        <div id="box">
            <!-- keep-alive保持组件原状态 -->
            <keep-alive>
                <!-- 动态组件用<component>的is属性区分加载哪个组件 -->
                <component v-bind:is="who"></component>
            </keep-alive>

            <ul>
                <li><a href="#" @click="who='home'">首页</a></li>
                <li><a href="#" @click="who='list'">列表</a></li>
                <li><a href="#" @click="who='add'">添加</a></li>
            </ul>
        </div>

        <script>
            const vm = new Vue({
                el: '#box',
                data() {
                    return {
                        who: 'home'
                    };
                },
                components: {
                    home: {
                        template: `<div>this is [home] component
                            <input type="text" /></div>`
                    },
                    list: {
                        template: `<div>this is [list] component</div>`
                    },
                    add: {
                        template: `<div>this is [add] component</div>`
                    }
                }
            });
        </script>
    </body>
</html>
